<script setup lang="ts">
import { ref } from 'vue';

import { useUserStore } from '@/stores/user';

const userStore = useUserStore()
const wallet = ref(userStore.info)
userStore.$subscribe((_mutation, state) => {
    wallet.value = state.info
})

const emit = defineEmits(['question'])
</script>

<template>
    <div class="wallet">
        <span class="wallet-tip">Church check-in travel funds</span>
        <div class="wallet-amount">
            <img src="@/assets/imgs/doller.png" alt="doller" width="32">
            <span>{{ wallet.totalAmount }}</span>
            <div class="question" @click="emit('question')">
                <img class="question_icon" src="@/assets/imgs/question.png" alt="question" width="10" >
            </div>
        </div>
        <RouterLink to="/exchange">
            <div class="wallet-btn">
                <img src="@/assets/imgs/wallet.png" alt="wallet" width="32">
                <span>Get travel funds</span>
            </div>
        </RouterLink>
    </div>
</template>

<style scoped lang="scss">
@import url(./index.scss);
</style>